/**
 * 这个组件在用户界面上
 *      返回一个
 *          由背景图片和背景图片中心位置的一个头像的组件
 */

import React, {Component} from 'react';
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  Dimensions,
  Button,
  Image,
  TouchableOpacity,
} from 'react-native';
import {MineImg} from '../../images/index';
const {width} = Dimensions.get('window');

export default class TopPicture extends Component {
  static defaultProps = {
    disableClick: true,
    onPressFunc: () => {},
  };

  render() {
    const {uri, disableClick, onPressFunc} = this.props;
    return (
      <View style={styles.imgContainer}>
        <Image style={styles.img} source={MineImg.Backround} />
        <TouchableOpacity
          disabled={disableClick}
          onPress={() => onPressFunc()}
          style={styles.insideImg}>
          <Image
            source={{uri: uri}}
            style={{width: 70, height: 70, borderRadius: 35}}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imgContainer: {
    height: 230,
  },
  img: {
    width: 375,
    height: 230,
    alignItems: 'center',
  },
  insideImg: {
    width: 70,
    height: 70,
    marginTop: -150,
    marginLeft: 375 / 2 - 35,
    borderRadius: 35,
  },
});
